<script lang="ts" setup>
import { Login } from "@/api/user";
import { useStorage } from "@/hooks/storage";
import type { FormInstance, FormRules } from "element-plus";
import type { APIRES } from "@/hooks/types";
import { useRouter } from "vue-router";
const router = useRouter();
const storage = useStorage();

const isLogin = reactive({
  css: true,
  ctx: true,
});
const login = reactive({ username: "", password: "" });
const regist = reactive({ username: "", password: "" });

const rules = <FormRules<{ username: string; password: string }>>{
  username: { required: true, message: "请输入账号", trigger: "blue" },
  password: { required: true, message: "请输入密码", trigger: "blue" },
};

const signChange = () => {
  isLogin.css = !isLogin.css;
  setTimeout(() => {
    isLogin.ctx = !isLogin.ctx;
  }, 350);
};

const form_login = useTemplateRef<FormInstance>("form_login");

const onSubmit = () => {
  form_login.value?.validate((valid) => {
    if (valid) {
      Login(login).then((res: APIRES) => {
        const { code, data } = res.data;
        if (code == 200) {
          storage.setItem("token", data.token);
          router.replace("/");
        }
      });
    }
  });
};
const onRegister = () => {};
</script>

<template>
  <div class="container">
    <div class="login_regist">
      <div :class="['signbar', isLogin.css ? 'sign_l' : 'sign_r']">
        <div
          :class="['signIn', isLogin.css ? 'opac_1' : 'opac_0']"
          v-if="isLogin.ctx"
        >
          <div class="head">HELLO FRIENDS!</div>
          <div class="sendword">还没有账号？赶快注册一个吧！</div>
          <div class="btn" @click="signChange">SIGN UP</div>
        </div>
        <div :class="['signUp', isLogin.css ? 'opac_0' : 'opac_1']" v-else>
          <div class="head">COME BACK!</div>
          <div class="sendword">已有账号？赶快去登录吧！</div>
          <div class="btn" @click="signChange">SIGN IN</div>
        </div>
      </div>
      <div :class="['context', isLogin.css ? 'cont_l' : 'cont_r']">
        <div
          :class="['login', isLogin.css ? 'opac_1' : 'opac_0']"
          v-if="isLogin.ctx"
        >
          <div class="head">登 录</div>
          <el-form
            ref="form_login"
            :model="login"
            :rules="rules"
            class="demo-form-inline"
          >
            <el-form-item prop="username">
              <el-input
                v-model="login.username"
                clearable
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="login.password"
                clearable
                type="password"
                placeholder="请输入密码"
                @keyup.enter="onSubmit"
              ></el-input>
            </el-form-item>
            <div class="btns">
              <el-button class="btn" type="primary" @click="onSubmit">
                登 录
              </el-button>
              <div class="forget">忘记密码</div>
            </div>
          </el-form>
        </div>
        <div :class="['regist', isLogin.css ? 'opac_0' : 'opac_1']" v-else>
          <div class="head">注 册 账 号</div>
          <el-form
            ref="form_login"
            :model="regist"
            :rules="rules"
            class="demo-form-inline"
          >
            <el-form-item prop="username">
              <el-input
                v-model="regist.username"
                clearable
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="regist.password"
                clearable
                type="password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <div class="btns">
              <el-button class="btn" type="primary" @click="onRegister">
                注 册
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ebeff3;
  &::before {
    content: "";
    position: absolute;
    display: block;
    width: 670px;
    height: 400px;
    background-color: white;
    border-radius: 6px;
    box-shadow: -6px -6px 6px #fefefe;
  }
  .login_regist {
    position: absolute;
    width: 670px;
    height: 400px;
    background: #ebeff3;
    border-radius: 6px;
    box-shadow: 6px 6px 10px #d1d9e5;
    z-index: 1;
    .signbar,
    .context {
      position: absolute;
      display: flex;
      align-items: center;
      height: 100%;
      transition: 0.7s ease-in-out;
      .head {
        padding-bottom: 20px;
        color: #333;
        font-size: 24px;
        text-align: center;
        font-weight: 600;
      }
      .btns {
        text-align: center;
        .btn {
          width: 100%;
        }
        .forget {
          margin-top: 10px;
          color: #666;
          font-size: 12px;
          text-align: right;
          cursor: pointer;
        }
      }
    }
    .sign_l {
      left: 0;
      box-shadow: 4px 0 6px #d1d9e5;
    }
    .sign_r {
      left: 390px;
    }
    .cont_l {
      left: 290px;
    }
    .cont_r {
      left: 0;
      box-shadow: 4px 0 6px #d1d9e5;
    }
    .opac_0 {
      opacity: 0;
    }
    .opac_1 {
      opacity: 1;
    }
    .signbar {
      width: 280px;
      background: #ebeff3;
      z-index: 1;
      .signIn,
      .signUp {
        width: 200px;
        margin: auto;
        transition: 0.7s ease-in-out;
      }
      .sendword {
        padding: 20px 0;
        color: #666;
        text-align: center;
      }
      .btn {
        width: 100px;
        margin: 20px auto 0;
        padding: 6px 0;
        color: #999;
        text-align: center;
        font-weight: 600;
        border-radius: 40px;
        border: 2px solid #409eff;
        cursor: pointer;
        user-select: none;
      }
    }
    .context {
      width: 380px;
      background: #ebeff3;
      .login,
      .regist {
        width: 220px;
        margin: auto;
        transition: 0.7s ease-in-out;
      }
    }
  }
}
</style>
